import React, {useContext} from 'react';
import GlobalContext from '@/GlobalContext';
import {View, Text} from 'react-native';
import {Button, Tooltip} from '@rneui/base';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
const TabStack = createBottomTabNavigator();

import FontAwesome5 from 'react-native-vector-icons/FontAwesome5';
import Icon from './Icon';

import Message from './Message';
import Email from './Email';
import Doc from './Doc';
import Work from './Work';
import Book from './Book';
import {useMount, useSafeState} from 'ahooks';

const MoreAlert = () => {
  const [open, setOpen] = useSafeState(false);
  // useMount(() => {
  //   setOpen(true);
  // });
  return (
    <Tooltip
      withPointer={false}
      visible={open}
      containerStyle={{width: 160, height: 180, backgroundColor: '#FFF',marginLeft: 40}}
      onOpen={() => setOpen(true)}
      onClose={() => setOpen(false)}
      popover={<Text >Tooltip text</Text>}>
      <FontAwesome5
        name="plus-square"
        size={26}
        style={{
          marginRight: 10,
        }}
      />
    </Tooltip>
  );
};

const routeParentPath = 'WxBus';
export default ({setOpen, prevOpen}) => {
  const {navigationRef} = useContext(GlobalContext);

  return (
    <TabStack.Navigator
      screenOptions={{headerShown: false, animation: 'slide_from_right'}}>
      <TabStack.Screen
        name={`${routeParentPath}/Message`}
        component={Message}
        options={{
          title: '消息',
          tabBarIcon: ({color}) => (
            <Icon name="Message" color={color} width={24} height={24} />
          ),
          headerShown: true,
          headerLeft: props => (
            <FontAwesome5
              name="align-left"
              size={26}
              onPress={() => setOpen(prevOpen => !prevOpen)}
              style={{
                marginLeft: 10,
              }}
            />
          ),
          headerTitleStyle: {},
          headerStyle: {},
          headerRight: props => (
            <View
              style={{
                flexDirection: 'row',
                alignItems: 'center',
              }}>
              <MoreAlert />
              <Text
                onPress={() => {
                  navigationRef?.navigate('Home');
                }}
                style={{
                  marginRight: 10,
                  marginLeft: 10,
                }}>
                Home
              </Text>
            </View>
          ),
        }}
      />
      <TabStack.Screen
        name={`${routeParentPath}/Email`}
        component={Email}
        options={{
          title: '邮件',
          tabBarIcon: ({color}) => (
            <Icon name="Email" color={color} width={24} height={24} />
          ),
          headerShown: false,
        }}
      />
      <TabStack.Screen
        name={`${routeParentPath}/Doc`}
        component={Doc}
        options={{
          title: '文档',
          tabBarIcon: ({color}) => (
            <Icon name="Doc" color={color} width={24} height={24} />
          ),
          headerShown: false,
        }}
      />
      <TabStack.Screen
        name={`${routeParentPath}/Work`}
        component={Work}
        options={{
          title: '工作台',
          tabBarIcon: ({color}) => (
            <Icon name="Work" color={color} width={24} height={24} />
          ),
          headerShown: false,
        }}
      />
      <TabStack.Screen
        name={`${routeParentPath}/Book`}
        component={Book}
        options={{
          title: '通讯录',
          tabBarIcon: ({color}) => (
            <Icon name="Book" color={color} width={24} height={24} />
          ),
          headerShown: false,
        }}
      />
    </TabStack.Navigator>
  );
};
